<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
              *{
				  margin:0px;
				  padding:0px;
				  font-size: 12px;
		       }
			   
		   body{
			    background-color:#ffd8d9;
			   }
			   
        #father{
			    width:700px;
				background-color:#06F;
				margin:0 auto;
		 	   }
			   
	       #top{
			    width:700px;
				height:153px;
				background-color:#993;
			   }
			   
			   
		  #left{
			    width:180px;
				height:850px;
				background-color:#FFF;
				float:left;
				margin-top:2px;
			   }
			   
		 #right{
			    width:518px;
				height:800px;
				float:left;
				margin-top:2px;
				margin-left:2px;
			   }
			   
	     #top01{
			    background-image:url(img/banner.jpg);
				width:700px;
				height:120px;
			   }
					   		   
     #top02 ul{
		       list-style:none;
			  }
	 #top02 li{
		       float:left;
			   width:100px;
			   height:33px;
			   text-align:center;
			   line-height:33px;
		      }
	  #top02 a{
		       text-decoration:none;
			   color:black;
			   background-image:url(img/button1.jpg);
			   display:block;
		      }
		    
#top02 a:hover{
	           background-image:url(img/button1_bg.jpg);
			   position:relative;
			   bottom:2px;
			   right:2px;
	          }
	#left01 ul{
		       list-style:none;
		      }
	   #left01{
		       background-image:url(img/login.jpg);
			   background-repeat:no-repeat;
			   padding-top:50px;
		      }
	#left01 li{
		       margin-left:20px;
		      }
	 .txtStyle{
		       border:none;
			   border-bottom:solid black 1px;
			   width:100px;
			   padding:5px;
		      }
     .btnStyle{
		       width:30px;
			   margin:2px;
		      }
	 #left01 a{
		       text-decoration:none;
			   color:#000;
		      }
			h3{
			   background-color:#f9d0ce;
			   width:130px;
			   margin-top:10px;
			   font-size:14px;
			  }
    #left02 ul{
		       list-style:none;
		      }
	   #left02{
		       background-image:url(img/category.jpg);
			   background-repeat:no-repeat;
			   padding-top:55px;
			   padding-left:25px;
		      }	
    #left02 li{
	           background-image:url(img/icon1.gif);
			   background-repeat:no-repeat;
			   background-position:left center;
			   border-bottom:dashed 1px black;
			   width:130px;
			   padding-top:8px;
	          } 
	 #left02 a{
		       text-decoration:none;
			   color:black;
			   padding-left:10px;
		      }
#left02 a:hover{
	             color:red;
				 position:relative;
				 bottom:2px;
				 right:2px;
	            } 
      #right01{
		       background-image:url(img/news.jpg);
			   background-repeat:no-repeat;
			   width:518px;
			   height:145px;
			   background-color:#ffd8d9;
		      }
   #right01 li{
			  float:left;
			  margin-top:33px;
			  margin-left:2px;
			 }
   #right01 ul{
	           list-style:none;
	          }
	#right02{
		     width:518px;
			 height:400px;
			 background-image:url(img/recommend.jpg);
			 background-repeat:no-repeat;
			 background-color:#FFF;
		    }
 #right02 li{
	         float:left;
			 margin-top:40px;
			 margin-left:18.8px; 
	        }	
 #right02 ul{
	         list-style:none;
	        }
 #right02 a{
	        text-decoration:none;
			color:black;
	       }
#right02 a:hover{
	             color:red;
				 position:relative;
				 bottom:1px;
				 right:1px;
	            }
        #right03{
		         width:518px;
			     height:190px;
			     background-image:url(img/fresh.jpg);
			     background-repeat:no-repeat;
				 background-color:#FFF;
				 margin-top:10px;
				 
				 
		        } 
     #right03 li{
	             float:left;
			     margin-top:40px;
			     margin-left:18.8px; 
	            }
	 #right03 ul{
	             list-style:none;
	            }
	  #right03 a{
	             text-decoration:none;
			     color:black;
	            }
#right03 a:hover{
	             color:red;
				 position:relative;
				 bottom:1px;
				 right:1px;
                }

                }
		  #ul01{
			    width:50%;
			   }
</style>
</head>

<body>
<div id="father">
      <div id="top">
      
      <div id="top01"></div>
      
      <div id="top02">
      <ul>
           <li><a href="#">鲜花礼品</a></li>
           <li><a href="#">自助订花</a></li>
           <li><a href="#">绿色植物</a></li>
           <li><a href="#">花之物语</a></li>
           <li><a href="#">会员中心</a></li>
           <li><a href="#">联系我们</a></li>
           <li><a href="#">支付方式</a></li>
      </ul>               
      </div>
     
      </div>
      
      <div id="left">
      
      <div id="left01">
      <form action="#" method="post" name="frmLogin">
      <ul>
          <li>用户: <input name="txtUsername" type="text" class="txtStyle" /></li>
          <li>密码:<input name="txtPwd" type="password" class="txtStyle" /></li>
          <li> <input name="btnSubmit" type="button" value="登录" class="btnStyle" />
               <input name="btnReg" type="button" value="注册" class="btnStyle" />
               <a href="#">忘记密码</a></li>
      </ul>
      </form>
      </div>
      <div id="left02">
      <h3>用途</h3>
                <ul>
                    <li><a href="#">爱情鲜花</a></li>
                    <li><a href="#">生日送花</a></li>
                    <li><a href="#">新年鲜花</a></li>
                    <li><a href="#">家庭用花</a></li>
                    <li><a href="#">亲情用花</a></li>
                    <li><a href="#">道歉鲜花</a></li>
                    <li><a href="#">开业花篮</a></li>
                    <li><a href="#">会议用花</a></li>
                </ul>
                <h3>花材</h3>
                <ul>
                    <li><a href="#">玫瑰花</a></li>
                    <li><a href="#">百合花</a></li>
                    <li><a href="#">郁金香</a></li>
                    <li><a href="#">太阳花</a></li>
                    <li><a href="#">康乃馨</a></li>
                    <li><a href="#">马蹄莲</a></li>
                    <li><a href="#">扶朗</a></li>
                    <li><a href="#">剑兰</a></li>
                </ul>
                <h3>价格</h3>
                <ul>
                    <li><a href="#">100～200元</a></li>
                    <li><a href="#">200～300元</a></li>
                    <li><a href="#">300～400元</a></li>
                    <li><a href="#">400～500元</a></li>
                    <li><a href="#">500～600元</a></li>
                    <li><a href="#">600～800元</a></li>
                    <li><a href="#">800元以上</a></li>
                </ul>
      
      </div>      
      </div>
      
      <div id="right">
      <div id="right01">
               <ul>
                    <li><a href="#"><img src="img/news1.jpg" /></a></li>
                    <li><a href="#"><img src="img/news2.jpg" /></a></li>
                    <li><a href="#"><img src="img/news3.jpg" /></a></li>
              </ul>
      </div>
      <div id="right02">
                   <ul>
                   <li><a href="#"><img src="img/flower1.jpg"/><br />
                            幸福的味道<br />
                        </a>￥288元</li>
                   <li><a href="#"><img src="img/flower2.jpg" /><br />
                            阳光守护你<br />
                        </a>￥300元</li>
                   <li><a href="#"><img src="img/flower3.jpg" /><br />
                            温情永远<br />
                        </a>￥268元</li>
                   <li><a href="#"><img src="img/flower4.jpg" /><br />
                            爱无界<br />
                        </a>￥318元</li>
                  <li><a href="#"> <img src=  "img/flower5.jpg" /><br />                                    
                            亲亲宝贝<br />
                        </a>￥368元</li>
                   <li><a href="#"><img src="img/flower6.jpg" /><br />
                            相信是缘<br />
                        </a>￥188元</li>
                   <li><a href="#"><img src="img/flower7.jpg"/><br />
                            水晶童话<br />
                        </a>￥198元</li>
                   <li><a href="#"><img src="img/flower8.jpg"/><br />
                            天使之爱<br />
                        </a>￥268元</li>
                </ul>
      </div>
      <div id="right03">                <ul>
                    <li><a href="#"><img src="img/flower9.jpg" /><br />
                            亲亲宝贝<br />
                        </a></li>
                    <li><a href="#"><img src="img/flower10.jpg" /><br />
                            相信是缘<br />
                        </a></li>
                    <li><a href="#"><img src="img/flower11.jpg"/><br />
                            水晶童话<br />
                        </a></li>
                    <li><a href="#"><img src="img/flower12.jpg" /><br />
                            天使之爱<br />
                        </a></li>
                </ul>
                </div>
		  

      </div>
</div>
</body>
</html>
